<template>
	<view class="content">
		<uni-list style="width: 100%;">
			<uni-list-item
			:title= "user.nickName" 
			:note= "user.phone" 
			:showArrow= "true" 
			:showBadge= "true"
			:badgeType= "primary"
			:thumb= "user.avatar" 
			thumb-size= "lg"
			:rightText= 'isLogin ? "已登录" : "未登录"' />
			<button id="login-button" 
			type="default" 
			:plain="true" 
			v-if="isLogin == false"
			@click="getUserInfo"
			></button>
		</uni-list>
		<view class="middle">
			<view class="middle-left">
				<text class="middle-text flex flex-direction">项目:</text>
				<text class="middle-num flex flex-direction">{{ projectNum }}个</text>
			</view>
			<view class="middle-line"></view>
			<view class="middle-center">
				<text class="middle-text flex flex-direction">工作:</text>
				<text class="middle-num flex flex-direction">共{{ workListNum }}条</text>
			</view>
			<view class="middle-line"></view>
			<view class="middle-right">
				<text class="middle-text flex flex-direction">费用:</text>
				<text class="middle-num flex flex-direction">¥{{ totalCost }}元</text>
			</view>
		</view>
		<uni-section title="我的" type="line" style="width: 100%;"></uni-section>
		<uni-list style="width: 100%;">
			<uni-list-item
			title= "费用明细" 
			clickable
			:showArrow= "true" 
			@click= "goCostDetail" />
			<uni-list-item
			title= "支出分类" 
			clickable
			:showArrow= "true" 
			@click= "goCostCategory" />
			<uni-list-item
			title= "工作人员" 
			clickable
			:showArrow= "true" 
			@click= "goWorker" />
			<uni-list-item
			title= "工资管理" 
			clickable
			:showArrow= "true" 
			@click= "goSalary" />
		</uni-list>
		<uni-list style="width: 100%; margin-top: 50rpx;">
			<uni-list-item
			title= "团队" 
			clickable
			:showArrow= "true" 
			@click= "goTeam" />
			<uni-list-item
			title= "报销" 
			clickable
			:showArrow= "true" 
			@click= "goReim" />
		</uni-list>
		<uni-list style="width: 100%; margin-top: 50rpx;">
			<uni-list-item
			title= "关于我们" 
			clickable
			:showArrow= "true" 
			@click= "goAboutUs" />
		</uni-list>
		<button type="warn" @tap="logout" v-if="isLogin == true" style="margin: 30rpx auto;">退出登录</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin: false,
				rightText: '',
				projectNum: 0,
				workListNum: 0,
				totalCost: 0,
				user: {
					avatar: '/static/avatar.png',
					phone: ''
				}
			}
		},
		onLoad() {
			this.startUpdateUser();
		},
		onShow(){
		    if(!this.$dry.isLogin()){
		        this.isLogin = false;
				this.user.nickName = '';
				this.user.phone = '';
				this.user.avatar = '/static/avatar.png';
				uni.removeStorageSync("wxUserInfo");
				uni.removeStorageSync("token");
				uni.removeStorageSync("user");
		    }
			this.initData();
		},
		onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		      console.log(res.target)
		    }
		    return {
		      title: '大家都在用这款小工具管理项目，快来试试吧！！！',
		      path: '/pages/index/index'
		    }
		},
		methods: {
			async initData() {
				var user = await this.getUser();
				this.user.userId = user.userId;
				this.user.avatar = user.avatar;
				this.user.email = user.email;
				this.user.nickName = user.nickName;
				this.user.phone = user.phone;
				this.user.createTime = user.createTime;
				this.$dry.set("user", this.user);
				this.isLogin = true;
				uni.removeStorageSync("wxUserInfo");
				this.getProjectList();
				this.getCostList();
				this.getWorkList();
			},
			getUser() {
				var token = this.$dry.getToken();
				if(token) {
					var userData = this.$request.run("getUser",token);
					return new Promise((resolve) => {
						uni.request({
							url: userData.url,
							method: userData.method,
							header: userData.header,
							data: {"token": token},
							success: data => {
								resolve(data.data);
							},
							fail: (data, code) => {
								console.log('fail' + JSON.stringify(data));
							}
						})
					})
				}
			},
			updateUser(f) {
				var token = this.$dry.getToken();
				if(token){
				    var data = this.$request.run("getUser",token);
				    uni.request({
				    	url: data.url,
				    	method: data.method,
				    	header: data.header,
				    	data: {"token": token},
				    	success: data => {
				    		var user = data.data;
				    		this.user.userId = user.userId;
				    		this.user.avatar = user.avatar;
				    		this.user.email = user.email;
				    		this.user.nickName = user.nickName;
				    		this.user.phone = user.phone;
				    		this.user.createTime = user.createTime;
				    		uni.setStorageSync("user",this.user);
				    		this.isLogin = true;
				    	},
				    	fail: (data, code) => {
				    		console.log('fail' + JSON.stringify(data));
				    	}
				    })
				}
				var uploadData = this.$dry.get("uploadData");
				if(!uploadData) {
					this.$oss.getUploadData(token);
				} else {
					var expiration = new Date(uploadData.data.credentials.expiration);
					var now = new Date();
					if(expiration - now <= 0) {
						this.$oss.getUploadData(token);
					}
				}
			},
			startUpdateUser() {
				var that = this;
				var app = getApp();
				if(app.globalData.updateUserHandleId){
				    clearTimeout(app.globalData.updateUserHandleId);
				}
				app.globalData.updateUserHandleId = setTimeout(function(){
				    that.updateUser(that.startUpdateUser());
				// 	dry.updateUser(app, that, function(){
				//         dry.startUpdateUser(app, that);
				//     });
				}, 5000);
			},
			getUserInfo(){
				uni.getUserProfile({
					desc: '用户登录验证',
					success: e => {
						if(e.errMsg == "getUserProfile:ok"){
							uni.setStorageSync("wxUserInfo", e.rawData)
						    uni.navigateTo({
								url: "get-phone",
							});
						}
						else{
							uni.showModal({
								title: "信息",
								content: "您拒绝了微信授权",
								showCancel: false,
								confirmText: "确定"
							});
						}
					},
				})
			},
			getProjectList() {
				var token = this.$dry.getToken();
				if(token){
				    var data = this.$request.run("queryProjectsByCondition",token);
				    uni.request({
				    	url: data.url,
				    	method: data.method,
				    	header: data.header,
				    	data: {
							"queryAll": false
						},
				    	success: data => {
				    		var project = data.data;
							this.projectNum = project.length;
				    	},
				    	fail: (data, code) => {
				    		console.log('fail' + JSON.stringify(data));
				    	}
				    })
				}
			},
			getCostList() {
				var token = this.$dry.getToken();
				if(token){
				    var data = this.$request.run("getCostListByOwner", token);
				    uni.request({
				    	url: data.url,
				    	method: data.method,
				    	header: data.header,
				    	data: {
							"owner": this.user.userId
						},
				    	success: data => {
							if(data.statusCode === 200) {
								this.totalCost = data.data.totalCost;
							}
				    	},
				    	fail: (data, code) => {
				    		console.log('fail' + JSON.stringify(data));
				    	}
				    })
				}
			},
			getWorkList() {
				var token = this.$dry.getToken();
				if(token){
				    var data = this.$request.run("getAllWorkList", token);
				    uni.request({
				    	url: data.url,
				    	method: data.method,
				    	header: data.header,
				    	data: {
							"owner": this.user.userId
						},
				    	success: data => {
							if(data.statusCode === 200) {
								this.workListNum = data.data.length;
							}
				    	},
				    	fail: (data, code) => {
				    		console.log('fail' + JSON.stringify(data));
				    	}
				    })
				}
			},
			goWorker() {
				uni.navigateTo({
					url: '../worker/worker-index'
				})
			},
			goCostDetail() {
				uni.navigateTo({
					url: '../cost/detail'
				})
			},
			goCostCategory() {
				uni.navigateTo({
					url: '../cost/category'
				})
			},
			goSalary() {
				uni.navigateTo({
					url: '../salary/salary'
				})
			},
			goTeam(){
				uni.navigateTo({
					url: '../team/team'
				})
			},
			goAboutUs() {
				uni.navigateTo({
					url: '../about/about'
				})
			},
			goReim() {
				uni.navigateTo({
					url: '../reimbursement/reimbursement'
				})
			},
			logout(){
				var _this = this;
				uni.showModal({
					title: "信息",
					content: "确定要退出吗",
					showCancel: true,
					confirmText: "确定",
					success: function (res) {
						if (res.confirm) {
							_this.isLogin = false;
							_this.projectNum = 0;
							_this.workListNum = 0;
							_this.totalCost = 0;
							_this.user.avatar = '/static/avatar.png';
							_this.user.phone = '';
							_this.user.nickName = '';
							uni.clearStorageSync();
							
						}
					}
				});
			},
		},
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.middle {
		display: flex;
		align-items: center;
		position: relative;
		margin-top: 40rpx;
		width: 90%;
		height: 80rpx;
		background-color: #fff;
		border: 2rpx solid #eee;
		border-radius: 30rpx;
	}
	
	.middle-line {
		width: 2rpx;
		height: 80rpx;
		background-color: #eeeeee;
	}
	
	.middle-left {
		width: 33.3%;
		flex-grow: 1;
		color: #999;
		display: flex;
		align-items: center;
		text-align: center;
	}
	
	.middle-center {
		width: 33.3%;
		flex-grow: 1;
		color: #999;
		display: flex;
		align-items: center;
		text-align: center;
	}
	
	.middle-right {
		width: 33.3%;
		flex-grow: 1;
		color: #999;
		display: flex;
		align-items: center;
		text-align: center;
	}
	
	.middle-text {
		display: flex;
		margin-left: 20rpx;
		flex-direction: column;
		font-size: 24rpx;
	}
	
	.middle-num {
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
		color: #fcac45;
		font-size: 26rpx;
		-webkit-font-smoothing: antialiased;
	}
	#login-button {
		width: 100%;
		height: 128rpx;
		margin-top: -128rpx;
		border: none;
		outline: none;
	}
</style>
